/*
  学习目标：性能优化-避免不必要的更新
  1. 减轻state的设计
  2. 避免不必要的更新
  语法：shouldComponentUpdate(新的props){

        💥 通过新旧props值的对比
          return true  组件更新
          return false  组件不更新
      }

*/

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    count: 100,
    msg: 'hello React',
  };

  handleAdd = () => {
    this.setState({ count: this.state.count + 1 });
  };

  handleAddMsg = () => {
    this.setState({ msg: this.state.msg + '~' });
  };

  render() {
    const { count, msg } = this.state;
    return (
      <div>
        <h1>{count}</h1>
        <h1>{msg}</h1>
        <button onClick={this.handleAdd}>点我+1</button>
        <button onClick={this.handleAddMsg}>点我+~</button>
        <Child count={count}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  shouldComponentUpdate(nextProps) {
    if (nextProps.count !== this.props.count) {
      return true;
    }

    return false;
  }

  render() {
    console.log('Child被更新了  ----->  ');
    return <div>Child - {this.props.count}</div>;
  }
}

// 1. 优化

// 2.
// 2.1 减轻state
// 2.2 避免非必要的更新
